<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>模板语法之指令v-???</title>
    <!-- 安装vue：当你使用script进行vue安装之后，上下文就注册了一个全局变量 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 
        指令语法：
            1.什么是指令？ 有什么作用
            2.Vue框架中的所有指令的名字都以“v-”开始 
            3.插值是写在标签体当中的，那么指令需要写在标签里面，以属性的形式
            4.指令的语法规则：
                指令的一个完整的语法格式：
                    <HTML标签 v-指令名:参数="表达式">{{插值语法位置}}</HTML标签>  
                    表达式：
                        之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以些什么。
                        但是需要注意的是：在指令中的表达式位置不能外层添加{{}}
                    不是所有的指令都有参数和表达式
                        有的指令不需要参数和表达式，如 v-once
                        有的指令不需要参数,但需要表达式，如 v-if="表达式"
                        有的指令既需要参数,又需要表达式，如 v-bind:参数="表达式"
            5.v-once 指令
                作用：只渲染元素一次。之后会跳过，用于优化性能。
            6.v-if="表达式" 指令    
                作用：表达式为一个布尔表达式。true 渲染元素，false 不渲染元素
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-once>{{msg}}</h1>
        <h1 v-if="5>2">{{msg}}</h1>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>